let container=document.querySelector('.container')
// let progress=document.querySelector('#progress')
let topp=container.offsetTop //有色框距离body上边框的距离
window.onscroll=function(){//页面滚动条事件
    let scroll=Math.floor(document.documentElement.scrollTop) //滚动条距离顶部的距离
    let maxScr=document.body.offsetHeight-window.innerHeight  //滚动条能够达到的最大长度（即body的高度减去页面的高度）innerHeight：返回页面可见区的高度。
    let percent=(scroll*100/maxScr)+'%'  //比例关系
        document.querySelector('#inline').style.width=percent

    if(scroll>topp){//当滚动条距离顶部的距离大于了有色框距离body上边框的距离，就让页面固定。
        container.style.position='fixed'
        // progress.style.position='fixed'
    }else{
        container.style.position='static'
        // progress.style.position='static' //static为定位的默认值
        }
}